<template>
    <el-popover
        :placement="placement"
        width="338"
        v-model="visible">
        <div class="wrap">
            <div class="info">
                <div class="desc">
                    <div class="name">
                        <span>{{nick}}</span>
                        <img src="../assets/images/male.png" class="user-gender" v-if="gender === 1">
                        <img src="../assets/images/female.png" class="user-gender" v-else-if="gender === 2">
                    </div>
                    <div class="wxid">微信号：{{alias||wxid}}</div>
                </div>
                <el-avatar :src="avatar||defaultAvatar" class="avatar" fit="cover" shape="square" :size="60"></el-avatar>
            </div>
            <div class="other">

                <div class="item">
                    <span class="item-title">备&#12288;注</span>
                    <span>{{remark}}</span>
                </div>
                <!-- <div class="item">
                    <span class="item-title">备&#12288;注</span>
                    <span>{{remark}}</span>
                </div> -->
                 
            </div>
            <div class="ctrl">
                <el-tooltip v-if="!ismycontact" class="item" effect="dark" content="添加好友" placement="top">
                    <el-button size="mini" type="text" icon="el-icon-plus" @click="add"></el-button>
                </el-tooltip>
                <el-tooltip v-if="ismycontact" class="item" effect="dark" content="分享给好友" placement="top">
                    <el-button size="mini" type="text" icon="el-icon-share" @click="share"></el-button>
                </el-tooltip>
                <el-tooltip v-if="ismycontact" class="item" effect="dark" content="发送消息" placement="top">
                    <el-button size="mini" type="text" icon="el-icon-chat-dot-square" @click="tochat"></el-button>
                </el-tooltip>
            </div>
            
            
        </div>
       
        <el-avatar :src="avatar" slot="reference" fit="cover" shape="square" :size="size">
            <img slot="default" :src="defaultAvatar">     
        </el-avatar>


    </el-popover>    
</template>    
<script>
export default {
    name:"popover-avatar",
    props:['placement','size',  'avatar','gender','remark','csid'
    ,'wxaccount','wxid','alias','nick','friendsignature','ismycontact'],
    data(){
        return {
            visible:false    
        }
    },
    methods:{
        share(){
            this.$emit('share')
        },
        add(){
            this.$emit('add')
        },
        tochat(){
            this.$emit('tochat')
        }
    }   
}
</script>
<style scoped>
.wrap{
    padding: 30px 30px 0 30px;
}
.info{
    display:flex;
    flex-direction: row;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    align-items: center;
}
.name{
    font-size: 20px;
    color:#333
}
.wxid{
    font-size: 14px;
    color: #999
}
.desc{
    padding-right: 10px;
}
.user-gender{
    width: 16px;
    height: 16px;
}
.avatar{
    flex-shrink: 0
}
.other{
    padding:10px 0    
}
.ctrl{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.ctrl .el-button{
    font-size: 32px;
    padding: 5px;
    margin: 0;
}
.item{
    display: flex;
    flex-direction: row;
    color: #999;
    padding:10px 0
}
.item-title{
    width: 70px;
    flex-shrink: 0;
}
</style>